<template>
	<div>
		<el-card shadow="never">
			<div style="text-align: left;">
				<div style="display: flex;align-items: center;color: #606266;font-size: 14px;">
					<div>代理商信息</div>
					<el-input class="x_soso" v-model="search.searchInput" placeholder="请输入您要查询的代理商ID/名称或电话"></el-input>
					<el-button type="primary" @click="searchList">查询查询查询</el-button>
				</div>
				<div style="display: flex;align-items: center;color: #606266;margin:10px 0;font-size: 14px;">
					<div style="display: flex;align-items: center;">
						<div style="margin-right: 13px;">注册时间</div>
						<el-date-picker class="x_soso" v-model="valueDate" type="daterange" value-format="yyyy-MM-dd" range-separator="至"
						 start-placeholder="开始日期" end-placeholder="结束日期"></el-date-picker>
					</div>
					<div style="display: flex;align-items: center;">
						<div>签约状态</div>
						<el-select class="x_soso" filterable v-model="search.title" placeholder="已签约">
							<el-option v-for="item in openList" :key="item.id" :label="item.name" :value="item.id"></el-option>
						</el-select>
					</div>
					<div style="display: flex;align-items: center;">
						<div>归属运营商</div>
						<el-select class="x_soso" filterable v-model="search.title" placeholder="请选择归属运营商">
							<el-option v-for="item in agentList" :key="item.id" :label="item.name" :value="item.id"></el-option>
						</el-select>
					</div>
				</div>
				<div style="display: flex;align-items: center;color: #606266;margin:10px 0;font-size: 14px;">
					<div style="display: flex;align-items: center;">
						<div>代理商级别</div>
						<div style="display: flex;align-items: center;margin-left: 25px;">
							<!-- <span>全部</span>
							<span style="margin: 0 15px;">一级</span>
							<span>二级</span> -->
							<span class="rank" v-for="(item, index) in tabs" :class="{ active: index == num }" @click="tabTitle(index)">{{ item }}</span>
						</div>
					</div>
				</div>
			</div>
			<div style="text-align: left;margin-top: 30px;">
				<el-button type="primary" @click="reloadVal">刷新</el-button>
			</div>
			<div style="clear:both"></div>
			<el-table :data="tableData" style="width: 100%;margin-top: 20px">
				<el-table-column label="序号" type="index" width="50"></el-table-column>
				<el-table-column label="代理商ID/名称/手机号" align="center" width="300" prop="account"></el-table-column>
				<el-table-column label="归属运营商名称" align="center" width="150" prop="userName"></el-table-column>
				<el-table-column label="创建时间" align="center" width="150" prop="phoneNumber"></el-table-column>
				<el-table-column label="签约信息" align="center" width="300" prop="weChatNumber"></el-table-column>
				<el-table-column label="店长数量" align="center" width="150" prop="roleName"></el-table-column>
				<el-table-column label="门店数量" align="center" width="150" prop="schemeName"></el-table-column>
				<el-table-column label="客户数量" align="center" width="150" prop="schemeName"></el-table-column>
				<el-table-column label="徒弟数量" align="center" width="150" prop="schemeName"></el-table-column>
				<el-table-column label="签约设备数量" align="center" width="150" prop="schemeName"></el-table-column>
				<el-table-column label="累计锁点" align="center" width="150" prop="schemeName"></el-table-column>
				<el-table-column label="累计分润" align="center" width="150" prop="schemeName"></el-table-column>
				<el-table-column label="累计收入" align="center" width="150" prop="schemeName"></el-table-column>
				<el-table-column label="账户余额" align="center" width="150" prop="schemeName"></el-table-column>
				<el-table-column label="归属师父ID/名称/手机号" align="center" width="150" prop="schemeName"></el-table-column>

				<el-table-column fixed="right" label="停启用状态" align="center" width="150">
					<template slot-scope="scope">
						<el-switch v-model="scope.row.isEnabled" active-color="#13ce66" inactive-color="#dedede" :active-value="true"
						 :inactive-value="false" @change="changeSwitch(scope.$index, scope.row)"></el-switch>
					</template>
				</el-table-column>
				<el-table-column fixed="right" label="操作" align="center" width="100">
					<template slot-scope="scope">
						<div style="color: #716ACA;" @click="particulars">详情</div>
					</template>
				</el-table-column>
			</el-table>
			<div style="margin-top: 20px;text-align: right">
				<el-pagination background @current-change="columnFind" :current-page="page.page" :page-size="page.pagesize" layout="prev, pager, next, jumper, total"
				 :total="page.count"></el-pagination>
			</div>
		</el-card>
	</div>
</template>

<script>
	import {
		setDownState
	} from '../../../server/index.js';
	export default {
		inject: ['reload'],
		data() {
			return {
				//查询
				search: {},
				// 分页
				tableData: [],
				loading: true,
				page: {
					count: 0,
					pagesize: 10,
					page: 1
				},
				// 时间
				valueDate: [],
				//代理商级别
				tabs: ['全部', '一级', '二级'],
				num: 0,
				openList: [{
						id: 0,
						name: '已签约'
					},
					{
						id: 1,
						name: '未签约'
					}
				],
				agentList: [{
						id: 0,
						name: '一号'
					},
					{
						id: 1,
						name: '二号'
					},
					{
						id: 2,
						name: '三号'
					}
				],
				// 页面数据
				tableData: [1, 2, 3, 4],
				id: 4
			};
		},
		methods: {
			//查询
			searchList() {},
			// 刷新方法
			reloadVal() {
				this.reload();
			},
			//代理商级别
			tab(index) {
				this.num = index;
				console.log(this.num);
			},
			// 停启用
			changeSwitch(index, row) {
				const _this = this;
				let isEnabled = '';
				if (row.isEnabled == true) {
					isEnabled = 1;
				} else {
					isEnabled = 0;
				}
				let dataMsg = {
					userId: row.userId,
					status: isEnabled
				};
				_this.http.request({
					url: setDownState,
					data: dataMsg,
					success: function(res) {
						if (res == 1) {
							row.isEnabled = true;
						} else {
							row.isEnabled = false;
						}
					},
					error: function(err) {
						_this.$message({
							offset: '200',
							message: err.msg
						});
					}
				});
			},
			//页面数据加载
			columnFind() {},
			// 页面跳转至详情
			particulars() {
				const _this = this;
				_this.$router.push({
					path: './agentDetail',
					query: {
						id: this.id,
						name: '代理商管理>代理商管理详情'
					}
				});
				console.log(this);
				console.log(this.$route);
			}
		},
		mounted() {}
	};
</script>

<style scoped="scoped" lang="less">
	.x_soso {
		margin-left: 25px;
		margin-bottom: 0;
	}

	.rank {
		margin-right: 15px;
		font-size: 14px;
	}

	.rank.active {
		color: #716aca;
	}

	.el-input__inner {
		height: 35px;
	}

	.el-button {
		height: 35px;
		line-height: 0;
	}

	.el-button--primary {
		background: rgba(113, 106, 202, 1);
		border: none;
	}

	.el-button--primary:hover {
		color: #606266;
		background: rgba(255, 255, 255, 1);
		border: 1px solid rgba(113, 106, 202, 1);
	}
</style>
